<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        td,
        table {
            width: 500px;
            height: 100px;
            border: blue 1px solid;
            line-height: 200px;
            /* 
           border-spacing: 100px 100px; */

        }

        tr {
            border-collapse: collapse;
            width: 500px;

            border: blue 1px solid;

            border-spacing: 100px 100px;
        }
    </style>
</head>

<body>
    <table  >
        <tbody>
            <tr style="color: aqua;">
                <td>ds</td>
                <td>gh</td>
                <td>dd</td>
            </tr>
            <tr>
                <td>ds</td>
                <td>gh</td>
                <td>dd</td>
            </tr>
        </tbody>
    </table>
    <div style="border:red 1px ridge ;" >
       <div style="border:red 1px ridge ;width:500px;float: left;">123</div> 
    </div>
    <div style="background: url(../img/small_icons.jpg) no-repeat -130px -160px/800px 400px;height:50px;width: 50px;border: red 10px solid;">
       
    </div>
    <span style="border: red 10px dotted;">
        gggggggggggg
    </span>
    <!-- <span style="background-image: url(../img/ooopic_1506740309.png);word-spacing:50px;border: red 100px dotted;">
        其他元素，或遇到父容器为止。的取值分别是：right、left、none。别是：right、left、none。t表示失去块级元素特征
        浮动属性是float，其可能的取值分别是：right、left、none。别是：right、left、none。t表示失去块级元素特征
        
    </span> -->
    <div style="border: rgb(111, 0, 255) 10px dotted;margin:50px;width: 1000px;height: 100px;">
        <span style="border: red 10px dotted;margin-right: 100px">
            gggggggggggg
        </span>
        <span style="border: red 10px dotted;margin-left: 0px">
            gggggggggggg
        </span>
    </div>
    <div style="border:brown 10px dotted;margin:0px;border-width: 5px 10px 20px 30px">m</div>
    float:right表示失去块级元素特征，元素自身向右浮动，直到遇上右边的其他元素，或遇到父容器为止。
    浮动属性是float，其可能的取值分别是：right、left、none。别是：right、left、none。t表示失去块级元素特征
    <header>



        ，元素<h1>自身向左浮动， ，元素自身向左

        </h1>浮动，
        <p>我是一个p标签

        </p>
        float:right表示失去块级元素特征，元素自身向右浮动，直到遇上右边的其他元素，或遇到父容器为止。
        浮动属性是float，其可能的取值分别是：right、left、none。float:left表示失去块级元素特征，
        元素自身向左浮动，直到遇上左边的其他元素，或遇到父容器为止。
        float:right表示失去块
        <div style="line-height: 100px;margin-bottom: 100px;">
            <img src="../img/ooopic_1506740309.png" style="border: red 10px dotted;margin-left: 100px;">
        </div>

        <img src="../img/ooopic_1506740309.png" style="border: red 10px dotted;margin-top:100px;width:500px;height: 150px;padding-top: 100px;">


        <ul style="border-spacing: 20px 500px;border-collapse:collapse;margin: 30px;line-height: 50px">
            <li value="8" style="list-style-position:inside;list-style-type:decimal;border: blue 5px dotted;border-collapse:collapse;  ">d</li>
            <li style="border: blue 5px dotted;border-collapse:collapse; border-spacing: 200px 50px; ">d</li>
            <li style="border: blue 5px dotted;border-collapse:collapse; border-spacing: 200px 50px; ">d</li>
        </ul>
        <ul style=" ">
            <li value="8" style="list-style-position:inside;list-style-type:decimal;border: blue 5px dotted; margin: 700px ">d</li>
            <li style="border: blue 5px solid; border-left-color: red ">d</li>
            <li style="border: blue 5px dotted; ">d</li>ddd
        </ul> ss
        <br>vv
    </header>dd
    <dl>dd
        <dt>高拱</dt>dd
        <dd>明朝隆庆年间的首辅...</dd>ss
    </dl>
    <dl>
        <dt>张居正</dt>
        <dd>明朝万历年间的首辅，利行改革，是位有作用为官员</dd>
        <dd>明朝万历年间的首辅，利行改革，是位有作用为官员</dd>
    </dl>gg

    <div style="border: rgb(111, 0, 255) 10px dotted;height: 500px;width: 1000px;">
        <div style="border: red 10px dotted; width: 1000px;height: 1000px;">
            gggggggggggg
        </div>
        <div style="border: red 10px dotted;height: 100px;width: 300px;margin: auto;">
            gggggggggggg
        </div>
    </div>
    <div style="border: red 10px dotted;position: absolute;  width: 200px; height: 50px;
 left:100px;right:100px;bottom: 500px;top:500px;margin:auto;">
        ，元素自身向左浮动， ，元素自身向左浮动，
        直到遇上左边的其他元素，或遇到父容器为止。
    </div>
</body>

</html>